<template>
    <div>
        <el-dialog :visible.sync="ifShow"
                   :close-on-click-modal="false"
                   @close='closeDialog'
                   top="20px"
                   v-dialogDrag>
            <el-form ref="paramsForm">
                <el-form-item label="任务名称">
                    <div>
                <span>
                    <el-input ref="nameInput" v-model="nodeInfo.name"
                              placeholder="请输入任务名称"
                              @input="updateInput"
                              style="float: left;margin-left: 1%;width: 77%;"></el-input>
                </span>
                    </div>
                </el-form-item>
                <el-form-item v-for="(item,i) in paramsFormat.fields"
                              :key="i"
                              :label="item.name">
                    <!--输入输出的string-->
                    <div v-if="parseInt(item.out)>-1">
                    <span>
                        <el-input ref="formInput" v-model="nodeInfo.param[i].lab"
                                  :placeholder="'请输入'+item.description"
                                  @input="updateInput"
                                  @change="handleChange(nodeInfo.param[i])"
                                  style="float: left;margin-left: 1%;width: 77%;"></el-input>
                    </span>
                        <span style="float: right;margin-right: 3%" id="icon">
                         <n3-icon v-if="parseInt(item.in)>-1"
                                  type="folder"
                                  size="large"
                                  @click.native="chooseInput(i)">
                         </n3-icon>
                         <n3-icon v-if="parseInt(item.out)>-1"
                                  type="folder"
                                  @click.native="chooseOutput(i)"
                                  size="large">
                         </n3-icon>
                    </span>
                    </div>

                    <div v-else-if="parseInt(item.in)>-1">
                    <span>
                        <!--<el-input ref="formInput" v-model="nodeInfo.param[i].lab"-->
                        <!--:placeholder="'请输入'+item.description"-->
                        <!--@input="updateInput"-->
                        <!--style="float: left;margin-left: 1%;width: 77%;"></el-input>-->
                         <el-autocomplete
                                 class="inline-input"
                                 v-model="nodeInfo.param[i].lab"
                                 :fetch-suggestions="querySearch"
                                 :placeholder="'请输入'+item.description"
                                 @select="handleSelect(nodeInfo.param[i])"
                                 style="float: left;margin-left: 1%;width: 77%;"
                         ></el-autocomplete>
                    </span>
                        <span style="float: right;margin-right: 3%" id="icon1">
                         <n3-icon v-if="parseInt(item.in)>-1"
                                  type="folder"
                                  size="large"
                                  @click.native="chooseInput(i)">
                         </n3-icon>
                         <n3-icon v-if="parseInt(item.out)>-1"
                                  type="folder"
                                  @click.native="chooseOutput(i)"
                                  size="large">
                         </n3-icon>
                    </span>
                    </div>

                    <!--有选项的string-->
                    <div v-else-if="item.option !==undefined">
                <span>
                    <el-select v-if="item.option!==undefined" v-model="nodeInfo.param[i].lab"
                               :placeholder="'请选择'+item.name"
                               @input="updateInput"
                               style="width: 77%;margin-left: 1%" clearable>
                        <!--可以选择的option-->
                          <el-option
                                  v-for="opt in item.option.split(',')"
                                  :key="opt"
                                  :label="opt"
                                  :value="opt">
                          </el-option>
                     </el-select>
                </span>
                    </div>
                    <!--普通的string-->
                    <div v-else>
                <span>
                    <el-input ref="formInput" v-model="nodeInfo.param[i].lab"
                              :placeholder="'请输入'+item.description"
                              @input="updateInput"
                              style="float: left;margin-left: 1%;width: 77%;"></el-input>
                </span>
                    </div>
                </el-form-item>
                <span id="crl">
                    <el-button type="success" @click="submit">提交</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                    <el-button type="danger" @click="cancel">取消</el-button>
                </span>
            </el-form>
        </el-dialog>
        <storagePathPicker @returnPath="getPathFromPicker"></storagePathPicker>
    </div>
</template>

<script>
    import storagePathPicker from './StoragePathPicker';

    export default {
        name: "ParamInputDialog",
        components: {
            storagePathPicker,
        },
        data() {
            return {
                ifShow: false,
                paramsFormat: {},
                nodeInfo: {},
                upnode: "0",
                upnodes: []
            }
        },
        methods: {
            handleChange(param) {
                param.val = param.lab;
                this.$forceUpdate()
            },
            //提供输入数据的可选项
            querySearch(queryString, cb) {
                if (this.upnode === "0") {
                    let results = [];
                    // 调用 callback 返回建议列表的数据
                    cb(results);
                } else {
                    // let results = [
                    //     {"value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号"},
                    //     {"value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号"}]
                    let results = [];
                    for (let item of this.upnodes) {
                        let result = {
                            "value": item.nodeId + ":" + item.params[0].val
                            // "value": item.params[0].val
                            // "value": item.nodeId
                        }
                        results.push(result)
                    }
                    cb(results);
                }
            },
            handleSelect(param) {
                param.val = param.lab.substring(param.lab.indexOf("/"), param.lab.length);
                this.$forceUpdate()
            },
            updateInput() {
                this.$forceUpdate()
            },
            chooseOutput(i) {
                this.$Bus.$emit('showStorages', false, i);
            },
            chooseInput(i) {
                this.$Bus.$emit('showStorages', true, i);
            },
            //由文件路径选择器传回的数据
            getPathFromPicker(param) {
                this.nodeInfo.param[param.index].lab = param.data.label;
                this.nodeInfo.param[param.index].val = param.data.value;
                this.$forceUpdate();
            },
            submit() {
                let str = this.check();
                if (str === "validate") {

                    for (let pa of this.nodeInfo.param) {
                        if(pa.lab.indexOf(":")!=-1){
                           //  pa.val = "file://"+pa.lab.substring(pa.lab.indexOf(":")+1,pa.length)
                            pa.val = pa.lab.substring(pa.lab.indexOf(":")+1,pa.length)
                        }else{
                            pa.val = pa.lab;
                        }

                    }
                    this.$message.info(JSON.stringify(this.nodeInfo));
                    this.closeDialog();
                } else {
                    this.$message.error("参数填写有误:" + str);
                }
            },
            reset() {
                for (let i = 0; i < this.paramsFormat.fields.length; i++) {
                    let param = {
                        "lab": this.paramsFormat.fields[i].default,
                        "val": this.paramsFormat.fields[i].default
                    };
                    this.nodeInfo.param[i] = param;
                }
                //迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
                this.$forceUpdate();
            },
            cancel() {
                this.closeDialog();
            },
            closeDialog() {
                this.ifShow = false;
            },
            check() {
                for (let i = 0; i < this.paramsFormat.fields.length; i++) {
                    let str = this.validate(this.paramsFormat.fields[i], this.nodeInfo.param[i].lab)
                    if (str !== "validate")
                        return str;
                }
                return "validate";
            },
            //TODO 添加验证条件
            validate(format, value) {
                if (value === null || value.trim().length === 0)
                    return format.name + "-为空.";
                if (format.datatype === "Integer") {
                    let regPos = new RegExp("^\\d+$"); // 非负整数
                    let regNeg = new RegExp("^\\-[1-9][0-9]*$"); // 负整数
                    if (!(regPos.test(value) || regNeg.test(value)))
                        return format.name + "-非整数."
                }
                return "validate";
            }
        },
        watch: {},
        created() {
            let that = this;
            this.$Bus.$on('showParamInputDialog', data => {
                that.ifShow = true;
                that.upnode = data.upnode;
                that.upnodes = data.upnodes;
                that.nodeInfo = data.nodeInfo;
                that.paramsFormat = {"fields": data.paramsFormat};
                //初始化表单时，设置参数值 = 默认值
                if (that.nodeInfo.param.length === 0) {
                    that.reset();
                }
                if (this.upnode === "0") {
                    // alert("没有上游节点")
                } else {
                    if (that.upnodes[0].params.length == 0) {
                        that.$message.warning("上游节点参数未填写完整");
                    }
                }

            });
        }
    }
</script>

<style>

    #icon:hover {
        color: #409EFF;
    }

    .output input {
        font-size: 0;
        position: absolute;
        left: -999px;
    }

    .output label {
        left: 0;
    }

    .el-form-item__label {
        min-width: 123px;
        text-align: center;
    }


    input[type=file] {
        display: none;
    }
</style>